<mat-card>
  <mat-card-title>Basic tabs</mat-card-title>
  <mat-card-content>
    <mat-tab-group>
      <mat-tab label="First"> Content 1 </mat-tab>
      <mat-tab label="Second"> Content 2 </mat-tab>
      <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Labels tabs</mat-card-title>
  <mat-card-content>
    <mat-tab-group>
      <mat-tab>
        <ng-template mat-tab-label>
          The
          <em>best</em> pasta
        </ng-template>
        <h1>Best pasta restaurants</h1>
        <p>...</p>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon>thumb_down</mat-icon> The worst sushi
        </ng-template>
        <h1>Terrible sushi restaurants</h1>
        <p>...</p>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Tabs and navigation</mat-card-title>
  <mat-card-content>
    <nav mat-tab-nav-bar>
      <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.path" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
        {{link.label}}
      </a>
    </nav>
    <router-outlet></router-outlet>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Lazy Loading tabs</mat-card-title>
  <mat-card-content>
    <mat-tab-group>
      <mat-tab label="First">
        <ng-template matTabContent>
          The First Content
        </ng-template>
      </mat-tab>
      <mat-tab label="Second">
        <ng-template matTabContent>
          The Second Content
        </ng-template>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>